Media
To make images resize responsively to page width, you can add the class responsive-img
to your image tag. It will now have a max-width: 100% and height:auto.
Media can be styled in different ways using Materialize.
<a class="btn btn-floating pulse"><i class="material-icons">menu</i></a>
<a class="btn btn-floating btn-large pulse"><i class="material-icons">cloud</i></a>
<a class="btn btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a>
To make images appear circular, simply add class="circle" to
them
This is a square image. Add the "circle" class to it to make it appear circular.
<div class="col s12 m8 offset-m2 l6 offset-l3">
<div class="card-panel grey lighten-5 z-depth-1">
<div class="row valign-wrapper">
<div class="col s2">
<img src="../../images/avatar/avatar-7.png" alt="" class="circle responsive-img"> <!-- notice the "circle" class -->
</div>
<div class="col s10">
<span class="black-text">
This is a square image. Add the "circle" class to it to make it appear circular.
</span>
</div>
</div>
</div>
</div>
We provide a container for Embedded Videos that resizes them responsively.
Responsive Embeds
To make your embeds responsive, merely wrap them with a containing div which has
the class video-container
<div class="video-container">
<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" allowfullscreen></iframe>
</div>
If your video does not have video controls, add the no-controls
class to the video container.